/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useEffect, useCallback, useMemo, useState } from "react";
import { Alert, Table, Popconfirm, Button, Row, Col, Modal, Form, Input, Popover } from "antd";
import { connect } from "dva";
import patterns from "@/utils/patterns";
import qrcode from "@/assets/kuaibao_yz.png";

const { phone: phoneReg } = patterns;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  },
};

const AddModal = Form.create()(({ visible, toggleModal, form, dispatch }) => {
  const { getFieldDecorator, validateFields, resetFields } = form;
  const handleModal = useCallback(
    open => {
      toggleModal(open);
      resetFields();
    },
    [toggleModal, resetFields]
  );

  const onOk = useCallback(
    () => {
      validateFields((err, fieldsValue) => {
        if (err) return;
        dispatch({
          type: "setup/addPostSet",
          payload: {
            ...fieldsValue,
          },
        }).then(() => {
          dispatch({
            type: "setup/getPostSetList",
          });
          handleModal(false);
        });
      });
    },
    [handleModal, validateFields, dispatch]
  );

  const onCancel = useCallback(
    () => {
      handleModal(false);
    },
    [handleModal]
  );
  return (
    <Modal visible={visible} title="添加" onOk={onOk} onCancel={onCancel}>
      <Form {...formItemLayout}>
        <FormItem label="手机号">
          {getFieldDecorator("phone", {
            rules: [
              {
                required: true,
                message: "请输入手机号！",
              },
              {
                ...phoneReg,
              },
            ],
          })(<Input placeholder="请输入手机号" />)}
        </FormItem>
        <FormItem label="姓名">
          {getFieldDecorator("name", {
            rules: [
              {
                required: true,
                message: "请输入姓名！",
              },
              {
                pattern: /^[\u4e00-\u9fa5]{0,10}$/,
                message: "姓名只能输入汉字，且不超过10位",
              },
            ],
          })(<Input placeholder="请输入姓名" />)}
        </FormItem>
      </Form>
    </Modal>
  );
});

const PushSet = ({ list, dispatch }) => {
  const [visible, setVisible] = useState(false);
  const [popVisible, setPopVisible] = useState(false);
  const columns = useMemo(
    () => [
      {
        title: "手机号",
        dataIndex: "phone",
        key: "phone",
      },
      {
        title: "姓名",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "操作",
        render: (_, record) => {
          const { id } = record;
          return (
            <Popconfirm
              onConfirm={() => handleDelet(id)}
              title="是否删除该条数据？"
              okText="是"
              cancelText="否"
            >
              <a>删除</a>
            </Popconfirm>
          );
        },
      },
    ],
    [handleDelet]
  );

  const toggleModal = useCallback(open => {
    setVisible(open);
  }, []);

  useEffect(
    () => {
      dispatch({
        type: "setup/getPostSetList",
      });
    },
    [dispatch]
  );

  const handleDelet = useCallback(
    id => {
      dispatch({
        type: "setup/delPostSet",
        payload: {
          id,
        },
      }).then(() => {
        dispatch({
          type: "setup/getPostSetList",
        });
      });
    },
    [dispatch]
  );

  return (
    <div>
      <Row type="flex" align="middle" style={{ marginBottom: 16 }} gutter={[16]}>
        <Col style={{ flex: 1 }}>
          <Alert
            type="warning"
            message={
              <div>
                <span>
                  关注快宝驿站公众号的并绑定自己手机号，即可每天收到下属驿站经营情况报表推送，
                </span>
                <span>
                  <Popover
                    content={<img width="250" src={qrcode} alt="" />}
                    trigger="click"
                    visible={popVisible}
                    onVisibleChange={v => setPopVisible(v)}
                    placement="bottom"
                  >
                    <a onClick={() => setPopVisible(true)}>点此关注公众号</a>
                  </Popover>
                </span>
              </div>
            }
            showIcon
          />
        </Col>
        <Col>
          <Button type="primary" onClick={() => toggleModal(true)}>
            添加
          </Button>
        </Col>
      </Row>
      <Table dataSource={list} columns={columns} rowKey="phone" pagination={false} />
      <AddModal visible={visible} toggleModal={toggleModal} dispatch={dispatch} />
    </div>
  );
};

export default connect(({ loading, setup }) => ({
  list: setup.postSetList,
  loading: loading.effects["setup/getPostSetList"],
}))(React.memo(PushSet));
